<template>
	<view class="indexPage">
		<view class="banner relative">
			<image src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/Frame%202522%402x.png"
				class="bannerImg absolute"></image>
			<u-gap height="526"></u-gap>
			<view class="liVue w100 flex-between padding-row30">
				<view class="li flex-column flex-center align-center" @click="$tools.navigate('./voice');">
					<image src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/Frame%402x.png" class="icon">
					</image>
					<text>AI声音训练</text>
				</view>
				<view class="li flex-column flex-center align-center" @click="$tools.navigate('./video');">
					<image src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/Frame%402x%20%281%29.png"
						class="icon"></image>
					<text>AI视频创作</text>
				</view>
			</view>


			<view class="box absolute">
				<!-- 教程学习 -->
				<view class="titleVue flex-between align-center">
					<view class="flex align-center">
						<image src="../../static/icon1.png" style="width: 48rpx; height: 48rpx;"></image>
						<text style="color: #333; font-weight: bold; line-height: 1;">教程学习</text>
					</view>
					<view class="flex align-center" @click="$tools.route('./tutorial')">
						<text style="color: #333; line-height: 1; font-size: 28rpx;">查看更多</text>
						<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
					</view>
				</view>
				<view class="margin20 w100 flex-between">
					<view class="tutorial" v-for="(item, index) in tutorials" :key="index"
						@click="$tools.router('../play', item.url)">
						<image :src="`https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/${index + 1}.png`"></image>
						<view class="title absolute-auto padding-row10" style="font-size: 36rpx;">{{ item.title }}
						</view>
					</view>
				</view>

				<!-- 用户案例 -->
				<view class="titleVue flex-between align-center margin30">
					<view class="flex align-center">
						<image src="../../static/icon2.png" style="width: 48rpx; height: 48rpx;"></image>
						<text style="color: #333; font-weight: bold; line-height: 1;">用户案例</text>
					</view>
					<view class="flex align-center" @click="$tools.route('./case')">
						<text style="color: #333; line-height: 1; font-size: 28rpx;">查看更多</text>
						<image src="../../static/more.png" style="width: 38rpx; height: 38rpx;"></image>
					</view>
				</view>
				<view class="margin20 w100">
					<view class="case" v-for="(item, index) in userCase" :key="index"
						@click.stop="toContrast(item.videoUrl, item.uploadVideoUrl)">
						<view class="w100 flex-between">
							<view class="caseimg">
								<view class="name">原视频</view>
								<image
									:src="item.uploadVideoUrl + '?x-oss-process=video/snapshot,t_1,f_jpg,m_fast,ar_auto'"
									mode="aspectFill"></image>
							</view>
							<view class="caseimg">
								<view class="name">AI视频</view>
								<image :src="item.videoUrl + '?x-oss-process=video/snapshot,t_1,f_jpg,m_fast,ar_auto'"
									mode="aspectFill"></image>
							</view>
						</view>
						<view class="botVue">{{ item.name }}</view>
					</view>
					<view class="w100 flex-column align-center" v-if="isEmpty">
						<image src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/empty.png"
							style="width: 222rpx; height: 222rpx;"></image>
						<text style="color: #81868e;font-size: 24rpx">暂无用户案例</text>
					</view>
				</view>
				<u-gap height="10"></u-gap>
			</view>
		</view>
	</view>
</template>

<script>
import WxLogin from "../../components/wxLogin.vue"

export default {
	components: {
		WxLogin
	},
	data() {
		return {
			videoUrl: "",
			uploadVideoUrl: "",
			banners: [],
			userCase: [],
			tutorials: [],
			isEmpty:false,
		}
	},

	async onLoad(option) {
		await this.getVideoTutorial()
		await this.getUserCase()
		// 检查 options 是否存在
		if (!option) {
		  console.error('携带参数option为空');
		  return;
		}
		console.log("分享页面携带的参数：",option);
		this.videoUrl = option.videoUrl
		this.uploadVideoUrl = option.uploadVideoUrl
		if(option.videoUrl){
		  // 跳转到指定的页面
		  wx.navigateTo({
			url: `/pages/mine/contrast?videoUrl=${this.videoUrl}&uploadVideoUrl=${this.uploadVideoUrl}`,
			success: function (res) {
			  console.log('跳转成功', res);
			},
			fail: function (res) {
			  console.log('跳转失败', res);
			}
		  });
		}
	},
	methods: {
		// 获取全部视频教程
		async getVideoTutorial() {
			const res = await this.$request("/shuziren/videoTutorial", {}, "GET")
			if (res.code === 200) this.tutorials = res.data.slice(0, 3)
		},

		// 获取用户案例
		async getUserCase() {
			const res = await this.$request("/shuziren/userVideo/public", {
				pageNum: 0,
				pageSize: 2
			}, "GET")
			if (res.code === 200) {
				this.userCase = res.data.content
				this.isEmpty = this.userCase.length === 0
			} else {
				this.isEmpty = true
			}
		},

		toContrast(videoUrl, uploadVideoUrl) {
			uni.navigateTo({
				url: `../mine/contrast?videoUrl=${videoUrl}&&uploadVideoUrl=${uploadVideoUrl}`
			})
		},
	}
}
</script>

<style lang="less" scoped>
.banner {
	width: 100%;
	background: #F8C329;
	padding-bottom: 80rpx;

	.bannerImg {
		width: 100%;
		height: 526rpx;
	}

	.liVue {
		margin: -28rpx auto 0;

		.li {
			width: 330rpx;
			height: 204rpx;
			background: linear-gradient(90deg, #FFEBB1 0%, #FEF2E2 100%);
			border-radius: 20rpx;
			padding: 36rpx 0;

			text {
				color: #333;
				font-weight: 600;
				font-size: 30rpx;
				line-height: 1;
			}

			image {
				width: 96rpx;
				height: 96rpx;
			}
		}

		.li:nth-child(2) {
			background: linear-gradient(90deg, #FFEBB1 0%, #FEF2E2 100%);
			border-radius: 20rpx;
		}
	}

	.box {
		width: 100%;
		height: 500rpx;
		left: 0;
		top: 740rpx;
		background: #fff;
		border-radius: 40rpx;
		padding: 30rpx;

		.tutorial {
			width: 216rpx;
			height: 264rpx;
			margin-right: 20rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.title {
				width: 100%;
				font-family: myfont;
				color: #fff;
				font-size: 32rpx;
				text-align: center;
			}
		}

		.tutorial:nth-child(3) {
			margin-right: 0;
		}

		.case {
			width: 100%;
			height: 415rpx;
			margin-bottom: 20rpx;

			.botVue {
				width: 100%;
				height: 80rpx;
				background: #f5f5f5;
				border-radius: 0 0 20rpx 20rpx;
				text-align: center;
				line-height: 80rpx;
				color: #333;
			}

			.caseimg {
				width: 335rpx;
				height: 335rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx 20rpx 0 0;
				}

				.name {
					width: 120rpx;
					height: 46rpx;
					background: rgba(0, 0, 0, 0.4);
					border-radius: 19rpx;
					position: absolute;
					left: 50%;
					transform: translate(-50%);
					bottom: 20rpx;
					color: #fff;
					font-size: 24rpx;
					text-align: center;
					line-height: 46rpx;
				}
			}
		}
	}
}
</style>
